<template>
	<view>
		<van-empty description="什么都没有找到哦（：" v-if="records.length == 0 " />
		<u-popup
		  v-model="show"
		   mode="right"
		  @close="onClose" length="70%"
		>
		    <view class="item-popup"> 
		        <view>
		            <view class="price">选择时间范围</view>
		            <van-row gutter="20">
		                <van-col span="8">
		                    <u-button 
		                    data-index="1" 
		                    @tap="selectDay" 
		                    :type="selectDayIndex == 1?'success':'default'" 
		                    size="mini" shape="circle">
		                        一天内
		                    </u-button>
		                </van-col>
		                <van-col span="8">
		                    <u-button 
		                    data-index="15" 
		                    @tap="selectDay" 
		                    :type="selectDayIndex == 15?'success':'default'" 
		                    size="mini" shape="circle">
		                        半月内
		                    </u-button>
		                </van-col>
		                <van-col span="8">
		                    <u-button 
		                    data-index="30" 
		                    @tap="selectDay" 
		                    :type="selectDayIndex == 30?'success':'default'" 
		                    size="mini" shape="circle">
		                        一月内
		                    </u-button>
		                </van-col>                
		            </van-row>
		        </view>
		
		        <view class="item-buttom-btn">
		            <van-button @tap="onClose" round plain type="info" class="r_btn"> 取 消  </van-button>
		            <van-button @tap="Determine"  color="#84adfb" round type="info" class="r_btn"> 确  定 </van-button>
		        </view>
		    </view>
		</u-popup>
		<view> 
			<view class="itme-header">
				<view class="select">
					<view class="selection">
						<view :class="select_active==1?'select-active select-text ':'select-text '" @tap="SwitchOptions" data-index="1" >失物</view>
						<view :class="select_active==2?'select-active select-text ':'select-text '" @tap="SwitchOptions" data-index="2" >寻物</view>
						<view :class="select_active==3?'select-active select-text ':'select-text '" @tap="SwitchOptions" data-index="3" >我的</view>
					</view>
					<view class="sort">
                
						<view @tap="onDisplay" class="showPopup">
							{{select_title}}
							<text class="iconfont iconshezhi "></text>
						</view>
					<!-- <van-calendar show="{{ show }}" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ maxDate }}" bind:close="onClose" bind:confirm="onConfirm" /> -->
					</view>
				</view>
			</view>
			<view class="content">
				<view class="left"> 
					<view class="item" v-for="(item,index) in records" v-if="index%2==0" :key="index">
						<image :src="item.imgUrlList.length>0?item.imgUrlList[0]:'../../static/images/header.jpg'" 
							@tap="LookPic"
							:data-img="item.imgUrlList[0]?item.imgUrlList[0]:'../../static/images/header.jpg'" 
							:lazy-load="true"
							mode="widthFix" />
						<view class="item-info"
						:data-talkindex="index" :data-talkid="item.id" @tap="goTalkDetail"
						>
							<view class="item-title">
								<text>{{ item.article }} </text>
							</view>
							<view class="item-content">
								<text> {{ item.content }}</text>
							</view>
							<view class="datePic">
								<van-tag mark :type="item.isReturn?'warning':'success'">{{ item.isReturn?"已找回":"未找回" }}</van-tag>
								<text class="item-date" v-if="item.lostTime">{{ item.lostTime }}</text>
							</view>
						</view>
						<view v-if="!isAdminShow&&is_My" class="item-bottom">
							<view class="item-bottom-btn" @tap="Delete"  :data-index="index">
								<text class="cuIcon-roundclosefill lg text-gray"></text>
							</view>
							<view class="item-bottom-btn" @tap="Retrieve"  :data-index="index">
								<text class="cuIcon-roundcheckfill lg text-cyan"></text>
							</view>
						</view>
						<view class="item-bottom" v-if="isAdminShow">
							<view class="item-bottom-btn" @tap="AdminDelete"  :data-index="index">
								<text class="cuIcon-deletefill lg text-gray"></text>
							</view>
							<view class="item-bottom-btn" @tap="AdminLock"  :data-index="index">
								<text class="cuIcon-lock lg text-cyan"></text>
							</view>
						</view>	
					</view>
				</view>
				<view class="right">
					<view class="item" v-for="(item,index) in records" v-if="index%2==1" :key="index">
						<image :src="item.imgUrlList.length>0?item.imgUrlList[0] + '!firemini':'../../static/images/header.jpg' " 
							@tap="LookPic" 
							:data-img="item.imgUrlList[0]?item.imgUrlList[0]:'../../static/images/header.jpg'"
							lazy-load
							mode="widthFix" />
						<view class="item-info"
						:data-talkindex="index" :data-talkid="item.id" @tap="goTalkDetail"
						>
							<view class="item-title">
								<text>{{ item.article }} </text>
							</view>
							
							<view class="item-content">
								<text> {{ item.content }}</text>
							</view>
							<view class="datePic">
								<van-tag mark :type="item.isReturn?'warning':'success'">{{ item.isReturn?"已找回":"未找回" }}</van-tag>
								<text class="item-date" v-if="item.lostTime">{{ item.lostTime }}</text>
							</view>
							<!--
							<view>
								<van-tag mark :type="item.isReturn?'warning':'success'">{{ item.isReturn?"已找回":"未找回" }}</van-tag>
							</view>
						
							<view class="item-date" v-if="item.lostTime">
								<text>{{ item.lostTime }}</text>
							</view> 
							-->
						
							
						</view>	
							
						<view v-if="!isAdminShow&&is_My" class="item-bottom">
							<view class="item-bottom-btn" @tap="Delete" :data-index="index">
								<text class="cuIcon-roundclosefill lg text-gray"></text>
							</view>
							<view class="item-bottom-btn" @tap="Retrieve"  :data-index="index">
								<text class="cuIcon-roundcheckfill lg text-cyan"></text>
							</view>
						</view>	

						<view class="item-bottom" v-if="isAdminShow">
							<view class="item-bottom-btn" @tap="AdminDelete"  :data-index="index">
								<text class="cuIcon-deletefill lg text-gray"></text>
							</view>
							<view class="item-bottom-btn" @tap="AdminLock"  :data-index="index">
								<text class="cuIcon-lock lg text-cyan"></text>
							</view>
						</view>	
					</view>
				</view>
			</view>
			<view class="isOver" v-if="isOver">已经到底了</view>
		</view>
	</view>
</template>

<script>
	const user = require("../../../../common/api/user.js")
	const utils = require("../../../../utils/util.js")
	import { getLostFoundUsingGET,getMyLostFoundUsingGET,setFoundUsingGET,delFoundUsingGET } from '../../../../common/api/forum'
	const admin = require("../../../../common/api/admin.js")
	export default {
		data() {
			return {
				select_active:1,
				userAvatar: '', 
				token: '',
				records: [],
				isDropDown: true,	// 默认不显示 下拉
				sortType: 0,  // 1 时间排序 2 选中日期排序
				date: '', // 时间
				selectDayIndex: '',// 选择时间
				show: false,
				minDate: new Date(2021, 1, 1).getTime(), // 起使时间
				maxDate: new Date().getTime(), // 当前时间
				is_My: false,	// 控制小按钮是否出现
				isAdminShow: false,
				select_title:"筛选",
				timeHorizon:'',
				QueryParams:{
				   page:1,
				   size:10,
				},
				size:0,
				select_tit:'',
				isOver:false
			}
		},
		onLoad() {
			this.get_date()// 发送请求获取数据2
		},
		onShow() {
			// 检查登录状态
			utils.loginStatus();
			let token = uni.getStorageSync("token");
			let {
			  userAvatar,
			  authorities
			} = uni.getStorageSync("userInfo");
			  this.token = token
			  this.userAvatar = userAvatar
			user.loginStatusUsingGET(token)
			this.AnnounceDisplay(authorities)
		},
		methods: {
			// 控制公告显示
			AnnounceDisplay(authorities=[]){
			    authorities.forEach((v) =>{
			      // console.log(v)
					if(v.authority == "ROLE_administrator"){
						console.log("是认证用户")
						this.isAdminShow = true
					}
			    })
			},
			// 点击切换分类
			SwitchOptions(e){
				this.isOver = false
			    this.select_active = e.currentTarget.dataset.index,
			    this.is_My = false
				this.select_title = '筛选'
			    // 切分类之后 重新获取数据
			    this.QueryParams.page = 1
			    this.QueryParams.size = 10
			    this.records = [],
			    this.date = ''
			    // 获取自己发布的数据
			    if(this.select_active == 3){
			        this.is_My = true
			        this.myLostfound();
			        return
			    }
			    // 发送请求获取数据2
			    this.get_date()
			},
			// 获取自己发布的
			myLostfound(){
			    let data = {
			      page:this.QueryParams.page,
			      size:this.QueryParams.size
			    }
			    let talkIdParams = utils.generateParams(data)
			    // 消息提示
			    // utils.wxShowLoadingtUtil("111")
				
			    getMyLostFoundUsingGET(talkIdParams,this.token).then(res=>{
			    let records1 = res.data.data.records
			    let { total } = res.data.data
			    this.Set_Date(records1, total)
					console.log(res)
			    }).catch(err=>{
					console.log(err)
			    })
			},
			// 获取数据
			get_date(lostTime = ''){
			    let data = {
			      page:this.QueryParams.page,
			      size:this.QueryParams.size,
			      typeId:this.select_active,
			      lostTimeAsc:this.sortType == 0?false:true,
			      lostTime: lostTime
			    }
				if(this.selectDayIndex != undefined){
				      data["timeHorizon"] = this.selectDayIndex
				}
			    let talkIdParams = utils.generateParams(data)
			    // 消息提示
			    // utils.wxShowLoadingtUtil("222")
				
			    getLostFoundUsingGET(talkIdParams,this.token).then(res=>{  
			    let records1 = res.data.data.records
			    let { total } = res.data.data
			    this.Set_Date(records1, total)
			    })
			},
			// 设置数据
			Set_Date(records1,size){
			      if(records1.length>0){
			        records1.forEach((v,i) => {
			          try {
			            v.imgUrlList = JSON.parse(v.imgUrlList) 
			          }catch(err){
			            v.imgUrlList = []
			            console.log(err)
			          }
			
			          
			      });
			        this.records = [...this.records,...records1]
					// this.records.push(...this.records,...records1)
			        this.size = size
			    }
			},
			// 跳转到详情页
			goTalkDetail(e) {
			    console.log(e.currentTarget.dataset.talkid)
			    var talkid = e.currentTarget.dataset.talkid
			    var talkindex = e.currentTarget.dataset.talkindex
			    console.log(talkindex)
			    console.log(JSON.stringify(this.records[talkindex]));
			    let records = this.records[talkindex]
			    let records_1 = encodeURIComponent(JSON.stringify(records))
			
			    uni.navigateTo({
					url: '/pages/home/appmenu/lostFoundDetail?talkid=' + talkid + '&talk=' + records_1,
					success: (result) => {
						console.log(result)
					},
					fail: function (res) {
						console.log(res)
					}
			    });
			},
			// 看图片
			LookPic(e){
			    // 预览本地图片会出问题 使用网络图片
			    let image = e.currentTarget.dataset.img || '../../static/images/header.jpg';
			    console.log(image)
				wx.previewImage({
					current:image,
					urls:[image]
				})
			},
			// 日期时间
			onDisplay() {
			    this.show = true
			},
			onClose() {
			    this.show = false
			},
			
			Determine(event) {
				this.records = []
				this.isOver = false
			    this.QueryParams.page = 1
			    this.QueryParams.size = 10
				this.select_title = this.select_tit
			    // this.show = false
				this.get_date()
				this.onClose()
			},
			 // 已经找回
			Retrieve(e){
				uni.showModal({
					content: '确定已找回物品？',
					confirmText:'确定',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title:'已找回'
							})
							console.log("以找回")
							let { index } = e.currentTarget.dataset
							let data = { lostFoundId: this.records[index].id }
							let talkIdParams = utils.generateParams(data)
							setFoundUsingGET(talkIdParams ,this.token).then(res=>{
								if(res.data.code==200){
									this.records.splice(index, 1)
								}   
							})
						}
					}
				});
			},
			// 删除
			Delete(e){
				uni.showModal({
					content: '确定删除此告示？',
					confirmText:'删除',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							console.log("删除")
							let { index } = e.currentTarget.dataset
							let data = { lostFoundId: this.records[index].id }
							let talkIdParams = utils.generateParams(data)
							delFoundUsingGET(talkIdParams ,this.token).then(res=>{
							  if(res.data.code==200){
							    this.records.splice(index, 1)
							  } 
							})
						}
					}
				});
			},
			AdminDelete(e){ // 管理员删除
			    uni.showModal({
			    content: '确定删除此告示？',
				confirmText:'删除',
				confirmColor:'#0099ff',  
				cancelColor:'#0099ff',
			    success: (res) => {
			        if (res.confirm) {
						console.log(e)
						console.log("删除")
						let { index } = e.currentTarget.dataset
						let data = { lostfontId: this.records[index].id }
						let talkIdParams = utils.generateParams(data)
						admin.deleteLostfontUsingGET(talkIdParams, this.token).then(res=>{
							if(res.data.code==200){
								this.records.splice(index, 1)
							} 
						})
						}
					}
				});
			   
			},
			AdminLock(e){ // 管理员锁定
				uni.showModal({
					content: '确定锁定此告示？',
					confirmText:'锁定',
					confirmColor:'#0099ff',  
					cancelColor:'#0099ff',
					success: (res) => {
						if (res.confirm) {
							console.log("锁定")
							let { index } = e.currentTarget.dataset
							let data = {
							  lostfontId: this.records[index].id
							}
							let talkIdParams = utils.generateParams(data)
							admin.lockLostfontUsingGET(talkIdParams, this.token).then(res=>{
								if(res.data.code==200){
									this.records.splice(index, 1)
								}
							})
						}
					}
				});
			},
			selectDay(e){
			    console.log(e)
			    let {index} = e.currentTarget.dataset
				console.log(index);
			    let data = {
			      '1':"一天内",
			      '15':"半月内",
			      '30':"一月内"
			    }
			
			    if(this.selectDayIndex==index){
			        this.selectDayIndex = '',
			        this.select_title = "筛选"
					return
			    }
					
			      this.selectDayIndex =index
				this.select_tit = data[index]
			}
		},
		// 页面上滑 滚动条触底事件
		onReachBottom() {
			console.log('上拉')
			this.isOver = true
			
			this.QueryParams.page++;
			// 获取自己发布的数据
			if(this.select_active == 3){
			    this.is_My = true
			    this.myLostfound();
			    return
			}
			this.get_date()      
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉')
			this.isOver = false
			this.records = []
			this.selectDayIndex = '',
			this.select_title = "筛选"
			this.QueryParams.page = 1
			this.QueryParams.size = 10
			if(this.select_active == 3){
			    this.is_My = true
				setTimeout(() => {
			    	this.myLostfound();
					uni.stopPullDownRefresh()
				},1000)
			    return
			}
			setTimeout(() => {
				this.get_date()
				uni.stopPullDownRefresh()
			},1000)
		}
	}
</script>

<style>
page {
  position: relative;
  padding-top: 80rpx;
  width: 95%;
  margin: 0 auto;
  background-color:  #eaeaea !important;
}
.isOver{
	width: 100%;
	text-align: center;
	color: #C0C0C0;
	font-size: 25rpx;	
	padding: 10rpx 0;		
}
.content .left .datePic {
	display: flex;
	width: 100%;
}
.show_notify {
  z-index: 999;
}
.itme-header {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.itme-header .select {
  display: flex;
  padding: 5rpx 10rpx;
  background-color: #f2f2f2;
}
.itme-header .select .selection {
  display: flex;
  flex: 3;
  text-align: center;
}
.itme-header .select .selection .select-text {
  width: 100rpx;
  border: 2rpx solid skyblue;
  border-radius: 20rpx;
  color: #515254;
  margin: 10rpx 10rpx;
}
.itme-header .select .selection .select-active {
  border-radius: 20rpx;
  background-color: #84adfb;
  color: #d3deeb;
}
.itme-header .select .sort {
  flex: 1;
  border-radius: 20rpx;
  justify-content: flex-end;
  color: #515254;
  margin: 10rpx 5rpx;
}
.itme-header .select .sort .showPopup {
  text-align: center;
}
/* 瀑布流布局 */
.content {
  display: flex;
  flex: 0 0 46%;
}
.left {
  margin: 0 2%;
  /* height: 100vh;
   */
  /* background-color: aqua; */
  width: 100%;
}
.right {
  margin: 0 2%;
  /* height: 100vh;
  background-color: bisque; */
  width: 100%;
}
.item {
  /* 避免内部断行 */
  background-color: #ffffff;
  /* // box-shadow: 10rpx 10rpx 10rpx #888888;
  border-radius: 24rpx 24rpx 15rpx 15rpx; */
  border-radius: 24rpx 24rpx 15rpx 15rpx;
  margin-bottom: 20rpx;
}
.item-info {
  padding: 10rpx 30rpx;
}
.item-title {
  max-width: 200rpx;
  font-size: 38rpx;
  font-weight: bold;
  color: #000000;
  /* 限制一行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-date {
  font-size: 24rpx;
  text-align: right;
  padding: 10rpx 0 0 50rpx;
  color: #bbb;
  /* margin-top: 20rpx; */
  /* 限制一行 */
  /* max-width: 200rpx; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-content {
  max-width: 200rpx;
  font-size: 26rpx;
  margin: 10rpx;
  color: #71cce0;
  word-break: break-all;
  /* 限制行数 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/*图片本身*/
.item image {
  width: 100%;
  /* 最大高度限制 */
  max-height: 500rpx;
  border-radius: 15rpx 15rpx 0 0;
}
.item-bottom {
  display: flex;
  justify-content: space-around;
}
.item-bottom-btn {
  font-size: 40rpx;
  text-align: center;
  padding: auto;
}
.item-popup {
  padding: 40rpx;
  height: 100%;
  width: 100%;
}
.item-popup .price {
  font-size: 30rpx;
  margin-top: 40rpx;
  margin-bottom: 30rpx;
}
.item-popup .item-price {
  background-color: aqua;
}
.item-popup .item-price .price-moddle {
  text-align: center;
  line-height: 80rpx;
  color: #464646;
}
.item-popup .item-price .van-cell {
  background-color: #f7f7f7;
  border-radius: 40rpx;
}
.item-popup .item-buttom-btn {
  position: fixed;
  left: 0;
  bottom: 40rpx;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


</style>
